/**
 *
 * Copyright 2016-present scrm
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

import React from 'react';
import { TextInput } from 'react-native';

class TextInput2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { placeholder: props.text.length == 0, defaultValue: props.defaultValue }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(ev) {
    const text = ev.nativeEvent.text;
    this.props.onChange && this.props.onChange(ev); 
    requestAnimationFrame(() => {
      this.setState({ placeholder: text.length == 0, defaultValue: text });
    }) 
  }
  render() {
    const { placeholderStyle, style, onChange, ...rest } = this.props;
    return <TextInput 
      {...rest} 
      defaultValue={this.state.defaultValue}
      autoFocus={this.state.defaultValue !== undefined }
      onChange={this.handleChange}
      style={!this.state.defaultValue && this.state.placeholder ? [style, placeholderStyle] : style}
      />
  }
}

export default TextInput2;

